<template>
	<div class="content">
		<van-nav-bar
			title="忘记密码"
			left-arrow
			left-text="返回"
			placeholder
			fixed
			@click-left="onClickLeft"
		></van-nav-bar>
		<div class="fp-img">
			<div class="flex-center">
				<van-image width="80px" height="80px" :src="paySlipImg" />
			</div>
			<p class="fp-text flex-center px14 text-bold">工资条</p>
		</div>
		<div class="fp-input">
			<van-form @submit="onSubmit">
				<van-field clearable type="tel" name="phone" v-model="phone" placeholder="请输入手机号" />
				<!-- :rules="[{ required: true, message: '请填写手机号' }]" -->
				<van-field
					clearable
					type="number"
					name="validation"
					v-model="validation"
					placeholder="请输入验证码"
				>
					<!-- :rules="[{ required: true, message: '请填写验证码' }]" -->
					<template #button>
						<van-button
							plain
							hairline
							size="small"
							type="primary"
							color="#4a6573"
							:disabled="start"
							@click="getValidation"
						>
							<span v-if="!start" class="text-bold">获取验证码</span>
							<van-count-down
								v-else
								class="text-bold"
								ref="countDown"
								format="sss后获取"
								:time="60000"
								:auto-start="start"
								@finish="finish"
							/>
						</van-button>
					</template>
				</van-field>
				<div style="margin: 30px 0;">
					<van-button block type="info" color="#4a6573" native-type="submit">
						提交
					</van-button>
				</div>
			</van-form>
		</div>
	</div>
</template>

<script>
export default {
	name: 'ForgetPassword',
	data() {
		return {
			paySlipImg: require('@/assets/pay-slip-icon.png'),
			phone: '',
			validation: '',
			start: false
		}
	},
	methods: {
		onClickLeft() {
			this.$router.push({ name: 'Password' })
		},
		onSubmit(values) {
			if (this.phone.length <= 0) {
				this.$toast('请输入手机号')
				return
			}
			if (this.validation.length <= 0) {
				this.$toast('请输入验证码')
				return
			}
			console.log('submit', values)
		},
		getValidation() {
			this.start = true
		},
		finish() {
			this.start = false
			this.$refs.countDown.reset()
		}
	}
}
</script>

<style lang="less" scoped>
@import '@/style/global.less';
.content {
	.fp-img {
		padding: 32px 0 16px;
		.fp-text {
			margin: 8px 0;
			color: #ffc554;
		}
	}
	.fp-input {
		padding: 8px 10vw;
		.van-cell {
			background-color: transparent;
			/deep/ input {
				background: transparent !important;
			}
			&:not(:last-child)::after {
				left: 0;
				border-bottom: 1px solid @main-color;
			}
			.van-button {
				background: transparent;
				border-color: transparent !important;
			}
		}
	}
}
</style>
